<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <!-- 实现一个步进器 （购物车的加减）.   
 如果数量等于1时，减少按钮变成灰色不可点击状态，如果数量大于等于10时，
 增加按钮变成不可点击状态。 -->
    <div id="app">
        <button @click="a--" :disabled="a<=1">-</button>
        <div id="num">{{a}}</div>
        <button @click="a++" :disabled="a>=10">+</button>

    </div>
</body>
<script src="/vue.js"></script>
<script>
    const { createApp, ref } = Vue;
    let app = createApp({
        setup() {
            let a = ref(1)
            return {
                a
            }
        }
    }).mount("#app")
</script>

</html>